<template>
  <div>
    <FormPanel ref="from" :list="formList" :isSubmitBtn="false" :collapse="false" :labelWidth="190"></FormPanel>
    <FilterTable ref="table" :columns="columns" :dataSource="tableList" height="auto" :isSelectColumn="false" :onColumnsChange="columns => (this.columns = columns)">
    </FilterTable>
    <BaseDialog :visible.sync="isVoucher" :title="'打款凭证'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <voucherUpload :rowData="VoucherData" @close="Voucherclose" />
    </BaseDialog>
    
     <BreakSpace label='操作记录' />
    <FilterTable
      ref="table"
      :columns="columns1"
      :dataSource="tableLists"
      :isSelectColumn="false"
      height='auto'
      :onColumnsChange="columns => this.columns1 = columns"
    >
    </FilterTable>
    <div style="height:47px;"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer(1)">关 闭</el-button>
    </div>
  </div>
</template>
<script>
import { getDetailById, getLog } from '@/api/omSale/salesPlan/planBusinessAuditSideB/index.js';
import { dictionary } from '@/utils/dictMixin';
import voucherUpload from './voucherUpload';
import Cookies from 'js-cookie';
import moment from 'moment';
export default {
  data() {
    this.saveData = null;
    return {
      formList: this.createdFrom(),
      columns: this.createdTable(),
      columns1:this.createdTables(),
      tableList: [],
      tableLists: [],
      isVoucher: false,
      VoucherData: {},
    };
  },
  props: ['rowData'],
  components: {
    voucherUpload
  },
  created() {
    this.init();
  },
  mounted() {
    this.table = this.$refs.table.$refs.pageTable;
  },
  mixins: [dictionary],
  methods: {
    async init() {
      var res = await getDetailById({id: this.rowData.id});
      this.getLog(this.rowData.id);
      if (res.resultCode == 200) {
        this.tableList = res.data.detailList;

        this.formList[1].initialValue = res.data.plan1No;
        this.formList[2].initialValue = res.data.planYearAndMonth;
        this.formList[3].initialValue = res.data.dealerName;
        this.formList[4].initialValue = res.data.quantity;
        this.quantity = res.data.quantity;

        this.tableList.map(x => {
          x.isMarginList =  [{ text: '否', value: 10041002 },{ text: '是', value: 10041001 }];
        });
      }
    },
    async closeDrawer(type) {
        this.$emit('close');
    },
    async getLog(id) {
      let res = await getLog({ id: id });
      this.tableLists = res.data || [];
    },
    uploadHandle(row) {
      console.log('row',row);
      let rowData = JSON.parse(JSON.stringify(row));
      rowData.readonly = true;
      if (rowData) {
        this.VoucherData = rowData;
        this.isVoucher = true;
      }
    },
    Voucherclose(VoucherData) {
      this.isVoucher = false;
    },
    createdFrom() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '订单信息'
        },
        {
          type: 'INPUT',
          label: '计划编号',
          fieldName: 'plan1No',
          disabled: true
        },
        {
          type: 'DATE',
          label: '计划年月',
          fieldName: 'planYearAndMonth',
          disabled: true,
          dateType: 'month',
          initialValue: moment().add(1,'months').format('YYYY-MM'),
        },
        {
          type: 'INPUT',
          label: '经销商名称',
          fieldName: 'dealerName',
          disabled: true
        },
         {
          type: 'INPUT',
          label: '数量',
          fieldName: 'quantity',
          disabled: true,
          editType: 'number'
        },
        {
          type: 'BREAK_SPACE',
          label: '车辆信息'
        }
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '物料编码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '物料描述',
          dataIndex: 'productName',
          align: 'center',
          width: 400,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '数量',
          dataIndex: 'planNum',
          sorter: true,
          filter: true,
          filterType: 'input',
          disabled: true,
          editable: true,
          editType: 'number',
          width: 100,
          editRequired: true,
          editPattern: /^[1-9]\d*$/,
          defaultEditable: true,
          rules: [{ required: true, message: '请填写正整数', trigger: 'blur' }],
          onInput: (index, data) => {
            this.changeNum(index, data);
          }
        },
         {
          title: '是否打保证金',
          dataIndex: 'isMargin',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: p => {
            return (
              <el-select
                size="mini"
                disabled
                v-model={p.row.isMargin}
                onChange={value => {
                  p.row.isMargin = value;
                }}
              >
                {p.row.isMarginList.map(item => (
                  <el-option key={item.value} label={item.text} value={item.value} />
                ))}
              </el-select>
            );
          }
        },
        {
          title: '打款凭证',
          render: p => {
            return (
               <multiuse-button
                size='mini'
                type='text' 
                onClick={value =>{
                  if (p.row.paymentVoucherUrl == null) return;
                  this.uploadHandle(p.row);
                }
                }>
              {p.row.paymentVoucherUrl != null ? '已上传' : null}
              </multiuse-button>
            );
          }
        },
        {
          title: '收车地址',
          dataIndex: 'address',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人',
          dataIndex: 'linkMan',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '送达城市',
        //   dataIndex: 'deliveryCityName',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        {
          title: '联系方式',
          dataIndex: 'linkPhone',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
           title: '备注',
          dataIndex: 'remark',
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: true,
          disabled: true,
          defaultEditable: true,
          editType: 'text'
        },
        {
          title: '市场指导价',
          dataIndex: 'oemDirectivePrice',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'input'
        },
        
        {
          title: '车系名称',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型名称',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
         {
          title: '配置',
          dataIndex: 'configName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '选装',
          dataIndex: 'optionName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '内饰',
          dataIndex: 'trimName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
      ];
    },
     createdTables(){
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '单据执行前状态',
          dataIndex: 'beforePlanStatus',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: p => {
            return <span>{this.createDictText(p.row.beforePlanStatus, '2103')}</span>;
          }
        },
        {
          title: '单据执行后状态',
          dataIndex: 'afterPlanStatus',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: p => {
            return <span>{this.createDictText(p.row.afterPlanStatus, '2103')}</span>;
          }
        },
        {
          title: '操作人员',
          dataIndex: 'createdBy',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '操作时间',
          dataIndex: 'createAt',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd hh:mm:ss'
        },
        {
          title: '操作类型',
          dataIndex: 'operationType',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span >{p.row.operationType}</span>;
          },
        },
        {
          title: '审核意见',
          dataIndex: 'auditOpinion',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
      ]
    }
  }
};
</script>
<style lang="less">
.discount {
  text-decoration: underline;
  color: #d1291a;
  cursor: pointer;
}
</style>
